<template>
  <div>
    <el-input v-model="message" placeholder="请输入文章标题" ref="title"></el-input>
    <el-button type="primary" @click="subMessage">提交</el-button>
    <el-card>{{ socketMessage }}</el-card>
  </div>
</template>

<script>
/*
  使用socket进行通信
  socket协议标识符为ws://地址:端口/path
  使用场景, 客户端与服务端建立长连接, 服务端能够像客户端发送信息
  1. 客户端使用原生方法, 
    1. 创建socket实例, webSocket('ws地址')
    2. 监听socket信息传送事件, 
      onopen
      onmessage
    3. 发送方法, 实例.send('message')


  使用socket.io创建socket实例
  1. 创建 ws实例 io(方法创建)
  2. 监听io事件
  3. 直接使用io.on, emit与后端通信
*/ 
// const path = require('path')
// console.log(process, path)
import {io} from 'socket.io-client'
export default {
  name: 'VueEleSocket',

  data() {
    return {
      message: '',
      socketMessage: '',
      socket: null,
      ws: null
    };
  },

  // created() {
  //   //1. 创建实例
  //   this.socket = new WebSocket('ws://127.0.0.1:8888');
  //   //2. 监听建立连接事件
  //   this.socket.addEventListener('open', (e) => {
  //     console.log('socket建立成功')
  //     console.log(e);
  //   })
  //   this.socket.addEventListener('message', (e) => {
  //     console.log('服务端发来信息');
  //     console.log(e)
  //     this.socketMessage = e.data;
  //   })
  //   this.socket.addEventListener('close', () => {
  //     console.log('socke链接关闭');
  //   })
  // },
  mounted() {
    this.ws = io('ws://127.0.0.1:8888', {transports: ['websocket']});
    this.ws.on('connect', () => {
      console.log('连接建立');
    })
    this.ws.on('disConnect', () => {
      console.log("连接断开")
    })
    this.ws.on('chat', (data) => {
      this.socketMessage = data
    })
  },

  methods: {
    subMessage() {
      // this.socket.send(this.message)
      this.ws.emit('chat', this.message)
    }
  },
};
</script>
